<template>
  <!--  订单流转按钮 -->
  <div style="display: inline-block;">
    <template v-if="type==='list'">
      <a-button
        ghost
        type="primary"
        v-if="item.status === 1"
        @click="receiveTruckOrder"
        style="margin-left: 10px;"
      >确认接单</a-button>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 1 && item.belongCompany==='JIA_HUA'"
        @click="tuiDanDo"
        style="margin-left: 10px;"
      >退单</a-button>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 1 || item.status === 2 || item.status === 3 || item.status === 4"
        @click="zuofeiDo"
        style="margin-left: 10px;"
      >作废</a-button>
      <slot></slot>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 2 || item.status === 3 || item.status === 4 || item.status === 5"
        @click="yichangOverDo"
        style="margin-left: 10px;"
      >异常结束</a-button>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 3 || item.status === 4"
        @click="cancelAssign"
        style="margin-left: 10px;"
      >取消派单</a-button>
      <a-button ghost type="primary" @click="gotoOrderDetail" style="margin-left: 10px;">详情</a-button>
    </template>
    <template v-if="type==='detail'">
      <a-button
        type="primary"
        v-if="item.status === 2 || item.status === 3 || item.status === 4 || item.status === 5"
        :ghost="item.status!==5"
        @click="yichangOverDo"
        style="margin-left: 10px;"
      >异常结束</a-button>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 1 && item.belongCompany==='JIA_HUA'"
        @click="tuiDanDo"
        style="margin-left: 10px;"
      >退单</a-button>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 1 || item.status === 2 || item.status === 3 || item.status === 4"
        @click="zuofeiDo"
        style="margin-left: 10px;"
      >作废</a-button>
      <a-button
        type="primary"
        v-if="item.status === 1"
        @click="receiveTruckOrder"
        style="margin-left: 10px;"
      >确认接单</a-button>
      <a-button
        ghost
        type="primary"
        v-if="item.status === 3 || item.status === 4"
        @click="cancelAssign"
        style="margin-left: 10px;"
      >取消派单</a-button>
      <slot></slot>
    </template>

    <!-- 作废 -->
    <a-modal
      v-if="item.status === 1 || item.status === 2 || item.status === 3 || item.status === 4"
      title="作废"
      centered
      :destroyOnClose="true"
      :maskClosable="false"
      :visible="zuofeiVisible"
      @ok="handleOk1"
      @cancel="handleCancel1"
    >
      <a-alert message="如果判定为作废，则订单讲无法流转，确定作废请填写作废原因" banner />
      <br />
      <a-form-model
        ref="zuofei"
        :model="form1"
        :labelCol="{span:3}"
        :wrapperCol="{span: 20}"
        :rules="rules1"
      >
        <a-form-model-item label="原因" prop="anomalousReason">
          <a-textarea :rows="3" v-model="form1.anomalousReason"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 异常结束 -->
    <a-modal
      v-if="item.status === 2 || item.status === 3 || item.status === 4 || item.status === 5"
      title="异常结束"
      centered
      :destroyOnClose="true"
      :maskClosable="false"
      :visible="yichangOverVisible"
      @ok="handleOk2"
      @cancel="handleCancel2"
    >
      <a-alert message="如果订单异常结束，则订单则无法流转，确定结束请填写异常结束原因" banner />
      <br />
      <a-form-model
        ref="yichangOver"
        :model="form2"
        :labelCol="{span:3}"
        :wrapperCol="{span: 20}"
        :rules="rules2"
      >
        <a-form-model-item label="原因" prop="anomalousReason">
          <a-textarea :rows="3" v-model="form2.anomalousReason"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 退单 -->
    <a-modal
      v-if="item.status === 1"
      title="退单"
      centered
      :destroyOnClose="true"
      :maskClosable="false"
      :visible="tuidanVisible"
      @ok="handleOk3"
      @cancel="handleCancel3"
    >
      <a-alert message="退单之后会将单子重新还给操作，操作修改了订单的相关信息之后可以再次派给陆运中心！" banner />
      <br />
      <a-form-model
        ref="tuidan"
        :model="form3"
        :labelCol="{span:3}"
        :wrapperCol="{span: 20}"
        :rules="rules3"
      >
        <a-form-model-item label="原因" prop="chargebackReason">
          <a-textarea :rows="3" v-model="form3.chargebackReason" placeholder="请输入退单的原因"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { receiveTruckOrder, cancelTruckOrder, anomalousTruckOrder, cancelTruckDispatch, chargebackTruckOrder } from '@/api/landCenter'

const fomrMessage = `必填项不能为空`

export default {
  name: 'order-operate',
  props: {
    type: String,
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 作废
      form1: {
        orderTruckId: '',
        anomalousReason: ''
      },
      zuofeiVisible: false,
      rules1: {
        anomalousReason: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      // 异常结束
      form2: {
        orderTruckId: '',
        anomalousReason: ''
      },
      yichangOverVisible: false,
      rules2: {
        anomalousReason: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      // 退单
      tuidanVisible: false,
      form3: {
        orderTruckId: '',
        chargebackReason: ''
      },
      rules3: {
        chargebackReason: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 详情
    gotoOrderDetail () {
      window.open(`orderDispatch/${this.item.orderTruckId}`, '_blank')
      // this.$router.push(`orderDispatch/${this.item.orderTruckId}`)
    },
    // 接单
    receiveTruckOrder () {
      if (!this.$root._bc.receive) {
        this.$message.error('您无此权限！')
        return
      }
      let _t = this
      _t.$confirm({
        title: '订单信息是否正确，接单后订单不可作废，确定接单吗？',
        onOk () {
          receiveTruckOrder({ orderTruckIds: _t.item.orderTruckId }).then(rsp => {
            _t.$message.success('接单成功')
            _t.$emit('initPage')
          })
        }
      })
    },
    // 作废
    zuofeiDo () {
      if (!this.$root._bc.voided) {
        this.$message.error('您无此权限！')
        return
      }
      this.form1.anomalousReason = ''
      this.form1.orderTruckId = this.item.orderTruckId
      this.zuofeiVisible = true
    },
    handleOk1 () {
      this.$refs.zuofei.validate(valid => {
        if (valid) {
          cancelTruckOrder(this.form1).then(rsp => {
            this.$message.success('作废成功')
            this.zuofeiVisible = false
            this.$emit('initPage')
          })
        }
      })
    },
    handleCancel1 () {
      this.zuofeiVisible = false
    },
    // 异常结束
    yichangOverDo () {
      if (!this.$root._bc.abnormalEnd) {
        this.$message.error('您无此权限！')
        return
      }
      this.form2.anomalousReason = ''
      this.form2.orderTruckId = this.item.orderTruckId
      this.yichangOverVisible = true
    },
    handleOk2 () {
      this.$refs.yichangOver.validate(valid => {
        if (valid) {
          anomalousTruckOrder(this.form2).then(rsp => {
            this.$message.success('异常结束成功')
            this.yichangOverVisible = false
            this.$emit('initPage')
          })
        }
      })
    },
    handleCancel2 () {
      this.yichangOverVisible = false
    },
    cancelAssign () {
      if (!this.$root._bc.cancelDispatch) {
        this.$message.error('您无此权限！')
        return
      }
      // 取消派单
      let _t = this
      _t.$confirm({
        title: '取消派单之后，订单将流转至待待派单状态。确定取消派单吗？',
        onOk () {
          cancelTruckDispatch({ orderTruckId: _t.item.orderTruckId }).then(rsp => {
            _t.$message.success('取消成功')
            _t.$emit('initPage')
          })
        }
      })
    },
    // 退单 1.2
    tuiDanDo () {
      if (!this.$root._bc.chargeback) {
        this.$message.error('您无此权限！')
        return
      }
      this.form3.chargebackReason = ''
      this.form3.orderTruckId = this.item.orderTruckId
      this.tuidanVisible = true
    },
    handleOk3 () {
      this.$refs.tuidan.validate(valid => {
        if (valid) {
          chargebackTruckOrder(this.form3).then(rsp => {
            this.$message.success('退单成功')
            this.tuidanVisible = false
            this.$emit('initPage')
          })
        }
      })
    },
    handleCancel3 () {
      this.tuidanVisible = false
    }
  }

}
</script>
